<template>
<a-modal @bpmnXML="bpmnXML" title="xml" width="900px" height="800px" :visible="show" :confirm-loading="modalLoading" @ok="modalOk"
    @cancel="modalCancel">
        <code class="language-xml"> {{ bpmnXML }}</code>     
    </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
    name: 'bpmnDetailModal',
    emits: ['ok', 'cancel'],
    props: {
        // 弹框标题（必填）
        bpmnXML: {
            type: String,
            required: true
        }
    },
    setup(props, context) {
        // 弹框显隐
        let show = ref<boolean>(false)
        // 弹框路由loading
        let modalLoading = ref<boolean>(false)

        // @desc: 弹框确认事件(回调)
        const modalOk = () => {
            context.emit('ok')
        }

        // @desc: 弹框取消事件(回调)
        const modalCancel = () => {
            context.emit('cancel')
            show.value = false
            modalLoading.value = false
        }

        // @Desc: 弹框打开方法(供父组件调用)
        const open = () => {
            show.value = true
        }

        // @Desc: 弹框关闭方法(供父组件调用)
        const close = () => {
            show.value = false
            modalLoading.value = false
        }

        return { show, modalLoading, modalOk, modalCancel, open, close }
    }
})

</script>
